<template>
    <div class="home">
      <div class="header">
        <a @click="goOutClick()"><span class="angle"></span><span>公告</span></a>
        <span></span>
        <span @click="shareClick()">分享</span>
      </div>
      <div class="content">
        <div>{{title}}</div>
        <div>{{sendtime | timeFun}}</div>
        <div v-show="unread > 0"><span>{{allread}}</span>人已读，<span>{{unread}}</span>人未读</div>
        <div v-show="unread == 0">全部已读</div>
        <div class="imgbox">
            <img :src="coverImg" alt="">
        </div>
        <div v-html="contentval"> </div>
      </div>
      <!-- 分享弹出层 -->
      <div class="delPopup" v-show="isshareShow" @click="canleClick">
          <div class="shareContent">
            <p>通过以下方式分享</p>
            <ul>
                <li v-for="(item,index) in shareLists" @click="shareModeClick(index)">
                    <img :src="item.imgsrc" alt="">
                    <p>{{item.name}}</p>
                </li>
            </ul>
            <div @click="canleClick">取消分享</div>
          </div>
      </div>
      <!-- 提示信息 -->
      <div class="tip" v-show="isTip">
        <p>{{tipMessage}}</p>
      </div>
      <!--退出弹出框-->
      <div class="delPopup" v-show="isShowdel">
          <transition name="slide-fade">
              <div class="delContent">
                  <v-deleteBox @ok="okClick" @canle="canleClick" :name="titlenameVal"></v-deleteBox>
              </div>
          </transition>
      </div>
    </div>
</template>
<script>
import { mapActions } from "vuex";
import deleteBox from "./cModule/del";
export default {
  data() {
    return {
      tipMessage: "服务器错误", //提示信息内容
      isTip: false, //提示信息是否出现
      oid: "7274e24d5deb444fb973b7dd18d7cca2",
      uid: "aeb5e154962341438c02ab5f62601982",
      isShowdel: false, //删除提示框是否出现
      titlenameVal: "确定要放弃此次输入？", //弹出框提示文字
      contentval: "", //公告内容
      unread: "", //未读
      allread: "", //已读
      sendtime: "", //发送时间
      title: "", //标题
      coverImg: "", //封面图片
      isshareShow: false, //分享的弹出层是否出现
      shareLists: [
        { name: "收藏", imgsrc: "/static/img/icon_tanchuang_wenjian@2x.png" },
        {
          name: "分享给微信好友",
          imgsrc: "/static/img/icon_tanchuang_weixin@2x.png"
        },
        {
          name: "分享到微信朋友圈",
          imgsrc: "/static/img/icon_tanchuang_shuayin@2x.png"
        },
        {
          name: "分享给QQ好友",
          imgsrc: "/static/img/icon_tanchuang_QQ@2x.png"
        },
        { name: "刷新", imgsrc: "/static/img/icon_tanchuang_PYQ@2x.png" }
      ], //分享选择列表
      isIOS: false //判断手机类型
    };
  },
  components: {
    "v-deleteBox": deleteBox
  },
  filters: {
    // 过滤时间
    timeFun: function(val) {
      if (val) {
        var standardTime = new Date(val);
        var y, m, d, h, f;
        y = standardTime.getFullYear();
        m = standardTime.getMonth() + 1;
        m = m > 9 ? m : "0" + m;
        d = standardTime.getDate();
        d = d > 9 ? d : "0" + d;
        h = standardTime.getHours();
        h = h > 9 ? h : "0" + h;
        f = standardTime.getMinutes();
        f = f > 9 ? f : "0" + f;
        return y + "-" + m + "-" + d + " " + h + ":" + f;
      } else {
        return "暂无";
      }
    }
  },
  created: function() {
    // self.oid = this.$route.query.oid
    // self.uid = this.$route.query.uid
    var self = this;
    this.getnoticeFun();
  },
  watch: {},
  methods: {
    //   判断手机浏览器版本
    judgevesionFun() {
      var self = this;
      var browser = {
        versions: (function() {
          var u = navigator.userAgent,
            app = navigator.appVersion;
          return {
            //移动终端浏览器版本信息
            trident: u.indexOf("Trident") > -1, //IE内核
            presto: u.indexOf("Presto") > -1, //opera内核
            webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核
            gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐内核
            mobile:
              !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android终端或者uc浏览器
            iPhone: u.indexOf("iPhone") > -1 || u.indexOf("Mac") > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf("iPad") > -1, //是否iPad
            webApp: u.indexOf("Safari") == -1 //是否web应该程序，没有头部与底部
          };
        })(),
        language: (
          navigator.browserLanguage || navigator.language
        ).toLowerCase()
      };
      if (
        browser.versions.ios ||
        browser.versions.iPhone ||
        browser.versions.iPad
      ) {
        self.isIOS = true;
      } else if (browser.versions.android) {
        self.isIOS = false;
      }
    },
    //   关闭窗口
    closeWindow() {
      if (this.isIOS == true) {
        close();
      } else if (this.isIOS == false) {
        window.callAndroid.JsCallandroid();
      }
      window.location.href = "/logout";
    },
    //   获取公告详情
    getnoticeFun() {
      var self = this;
      self
        .getnoticeinfo({
          id: self.$route.query.id
        })
        .then(data => {
          if (data.code == "000000") {
            self.title = data.data.notice.title;
            self.sendtime = data.data.notice.sendTime;
            self.unread = data.data.unread;
            self.allread = data.data.read;
            self.contentval = data.data.notice.content;
            self.coverImg = data.data.notice.image;
            self.judgevesionFun();
          } else {
            self.tipMessage = data.msg;
            self.isTip = true;
            setTimeout(() => {
              self.isTip = false;
            }, 1000);
          }
        })
        .catch(msg => {
          self.tipMessage = "服务器错误";
          self.isTip = true;
          setTimeout(() => {
            self.isTip = false;
          }, 1000);
        });
    },
    //   点击公告
    goOutClick() {
      if (this.$route.query.fg == 0) {
        this.$router.push({
          path: "/home"
        });
      }else{
        location.reload()
      }
    },
    //   点击分享
    shareClick() {
      this.isshareShow = true;
    },
    // 点击确认返回
    okClick() {
      this.isShowdel = false;
    },
    canleClick() {
      this.isShowdel = false;
      this.isshareShow = false;
    },
    // 点击选择分享方式
    shareModeClick(index) {
      var self = this;
      this.isshareShow = false;
      if (index == 0) {
        self
          .getusercolladdnc({
            noticeId: self.$route.query.id,
            title: self.title,
            uid: self.uid,
            content: self.contentval,
            imagePath: self.coverImg,
            flag: self.$route.query == 0?0:1,
            oid: self.oid
          })
          .then(data => {
            if (data == true) {
              self.tipMessage = "收藏成功";
              self.isTip = true;
              setTimeout(() => {
                self.isTip = false;
              }, 1000);
            } else {
              self.tipMessage = data.msg;
              self.isTip = true;
              setTimeout(() => {
                self.isTip = false;
              }, 1000);
            }
          })
          .catch(msg => {
            self.tipMessage = "服务器错误";
            self.isTip = true;
            setTimeout(() => {
              self.isTip = false;
            }, 1000);
          });
      } else if (index == 1) {
        if (self.isIOS == true) {
          self.shareIos(0);
        } else {
          self.shareAndroid(0);
        }
      } else if (index == 2) {
        if (self.isIOS == true) {
          self.shareIos(1);
        } else {
          self.shareAndroid(1);
        }
      } else if (index == 3) {
        if (self.isIOS == true) {
          self.shareIos(3);
        } else {
          self.shareAndroid(3);
        }
      } else if (index == 4) {
        location.reload();
      }
    },
    //调用ios
    shareIos(o) {
      var self = this;
      OCModel.shareNoticeWithParams({
        type: o,
        title: self.title,
        content: self.contentval,
        url: window.location.href.split('&')[0],
        imageUrl: self.coverImg
      });
    },
    //调用android
    shareAndroid(o) {
      window.call_androids.setWeChatShare(
        o,
        self.title,
        self.contentval,
        window.location.href.split('&')[0],
        self.coverImg
      );
    },

    ...mapActions(["getnoticeinfo", "getusercolladdnc"])
  }
};
</script>
<style scoped>
/* 删除弹框 */

.delPopup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000;
  background: rgba(126, 109, 105, 0.4);
}

.delContent {
  width: 60%;
  height: 10rem;
  background-color: #fff;
  border-radius: 10px;
  margin: calc((100vh - 10rem) / 2) auto;
  z-index: 100000;
}
/* ----------- */
.tip {
  position: fixed;
  width: 21rem;
  height: 4rem;
  background: #000;
  opacity: 0.6;
  z-index: 500;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 0.5rem;
  line-height: 4rem;
  text-align: center;
  color: #fff;
}
.content {
  margin-top: 5rem;
  height: calc(100vh - 5rem);
  padding: 1rem;
}
.content > div {
  line-height: 2.4rem;
}
.content > div:nth-of-type(1) {
  font-size: 1.5rem;
}
.content > div:nth-of-type(2) {
  font-size: 1.2rem;
  color: #757575;
}
.content > div:nth-of-type(3),
.content > div:nth-of-type(4) {
  color: #fd6162;
  font-size: 1.2rem;
}
.angle {
  border-left: 0.3rem solid #fff;
  border-bottom: 0.3rem solid #fff;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 1.85rem;
  transform: rotate(45deg);
  float: left;
}
.header {
  height: 5rem;
  line-height: 5rem;
  color: white;
  background-color: #fd6162;
  font-weight: normal;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  text-align: center;
  overflow: hidden;
  z-index: 1;
}
.header a {
  float: left;
  margin-left: 1rem;
}
.header > span:nth-of-type(1) {
  font-size: 1.6rem;
}
.header > span:nth-of-type(2) {
  float: right;
  margin-right: 1rem;
}
.noticeTitle input {
  height: 100%;
  width: 100%;
  font-size: 1.5rem;
}
.noticeTitle {
  border-bottom: 1px solid #e7e7e7;
  height: 4rem;
  line-height: 4rem;
  padding: 0 1rem;
}
.noticeContent {
  width: 100%;
  min-height: 4rem;
  padding: 1rem;
  font-size: 1.5rem;
  line-height: 2.4rem;
  word-wrap: break-word;
  overflow-x: hidden;
  overflow-y: auto;
}
.noticeContent:empty:before {
  content: attr(placeholder);
  font-size: 1.5rem;
  color: #777777;
}
.noticeContent:focus:before {
  content: none;
}
.imgbox img {
  width: 100%;
  height: 100%;
}
.shareContent {
  position: fixed;
  bottom: 0;
  left: 0;
  background: #efeff4;
  width: 100%;
}
.shareContent ul {
  overflow: hidden;
}
.shareContent li {
  float: left;
  padding: 0.5rem 1.5rem;
  width: 25%;
}
.shareContent li img {
  width: 6rem;
  height: 6rem;
}
.shareContent li p {
  text-align: center;
  font-size: 1.2rem;
  padding: 0.3rem 0;
}
.shareContent > p {
  text-align: center;
  font-size: 1.2rem;
  padding: 1rem 0;
}
.shareContent > div {
  width: 80%;
  margin: 1rem auto;
  padding: 1rem 0;
  background: #fff;
  border-radius: 5px;
  font-size: 1.6rem;
  text-align: center;
}
</style>